<template>
  <div style="height: 100%">
    <div v-if="!isShow" class="more_question">
      <div class="count">
        <span>{{ num }}</span
        >/{{ questionList.length }}
        <i>生活水平</i>
      </div>
      <div class="problem_box">
        <ul class="problem_list">
          <li v-for="(item, index) in questionList" :key="index">
            <p>{{ item.tit }}</p>
            <div>
              <button
                @click="seleBtnFn(item, k + 1)"
                :class="item.checked == k + 1 ? 'active' : ''"
                v-for="(data, k) in item.option"
                :key="k"
              >
                {{ data.val }}
              </button>
            </div>
          </li>
        </ul>
      </div>
      <div class="footer">
        <button class="save_btn" @click="saveFn">提交，查看结果</button>
        <button class="goback_btn" @click="gobackFn">返回</button>
      </div>
    </div>
    <Conclusion v-if="isShow"></Conclusion>
  </div>
</template>
<script>
import Conclusion from "./conclusion";
export default {
  name: "MoreQuestion",
  components: {
    Conclusion,
  },
  data() {
    return {
      isShow:false,
      questionList: [
        {
          tit: "1. 对于现在工作中的事，我经常感到焦虑或不安",
          checked: "",
          option: [
            {
              val: "是",
              isChecked: 0,
            },
            {
              val: "否",
              isChecked: 1,
            },
          ],
        },
        {
          tit: "2. 我常常感到筋疲力尽，甚至是每周的前几天",
          checked: "",
          option: [
            {
              val: "是",
              isChecked: 0,
            },
            {
              val: "否",
              isChecked: 1,
            },
          ],
        },
        {
          tit: "3. 通常我有足够的时间陪伴亲人",
          checked: "",
          option: [
            {
              val: "是",
              isChecked: 0,
            },
            {
              val: "否",
              isChecked: 1,
            },
          ],
        },
        {
          tit: "4. 我期望一天有多少小时陪伴家人",
          checked: "",
          option: [
            {
              val: "2小时",
              isChecked: 0,
            },
            {
              val: "3小时",
              isChecked: 1,
            },
            {
              val: "4小时",
              isChecked: 2,
            },
            {
              val: "5小时",
              isChecked: 3,
            },
          ],
        },
        {
          tit: "5. 对于现在工作中的事，我经常感到焦虑或不安",
          checked: "",
          option: [
            {
              val: "是",
              isChecked: 0,
            },
            {
              val: "否",
              isChecked: 1,
            },
          ],
        },
      ],
      num: 0,
    };
  },
  methods: {
    gobackFn() {
      this.$parent.goNext();
    },
    saveFn() {
      this.isShow = !this.isShow;
    },
    seleBtnFn(item, k) {
      item.checked = k;
      this.questionList = this.questionList.filter((key) => key != "");
      let num = 0;
      this.questionList.map((key) => {
        if (key.checked) {
          num += 1;
        }
      });
      this.num = num;
    },
  },
};
</script>
<style lang="less" scoped>
.more_question {
  padding: 0.28rem 0.33rem 0 0.33rem;
  height: 100%;
  box-sizing: border-box;
  .count {
    font-size: 0.16rem;
    color: #3f3f3f;
    margin-bottom: 0.36rem;
    span {
      font-size: 0.3rem;
      color: #d41045;
    }
    i {
      font-style: normal;
      color: #d41045;
      font-weight: bold;
      margin-left: 0.08rem;
    }
  }
  .problem_box {
    height: calc(100% - 1.44rem);
    overflow-y: auto;
    .problem_list {
      li {
        margin-bottom: 0.3rem;
        p {
          font-size: 0.16rem;
          color: #333333;
          margin-bottom: 0.26rem;
        }
        div {
          display: flex;
          button {
            width: 1.2rem;
            height: 0.36rem;
            border: 1px solid #cccccc;
            color: #666666;
            font-size: 0.16rem;
            margin-right: 0.2rem;
            border-radius: 0.36rem;
          }
          button.active {
            background: rgba(255, 224, 224, 1);
            border-color: rgba(255, 224, 224, 1);
            color: #d41045;
          }
        }
      }
    }
  }
  .footer {
    height: 0.74rem;
    background: #fff;
    position: relative;
    display: flex;
    justify-content: center;
     box-shadow: 10px -2px 15px -13px rgba(0, 0, 0, 0.2) inset;
    align-items: center;
    .save_btn {
      width: 1.5rem;
      height: 0.36rem;
      background: #d41045;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.04rem;
      font-size: 0.16rem;
      color: #ffffff;
    }
    .goback_btn {
      width: 0.8rem;
      height: 0.36rem;
      background: #ffffff;
      border: 1px solid #dddfe6;
      border-radius: 0.04rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      font-size: 0.16rem;
      color: #5a6b80;
      right: 0.19rem;
      top: 0.17rem;
    }
  }
}
</style>